<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>投票列表</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/vote.js"></script>

</head>
<body>
<div id="app">

    <vote @find="query">
        <div id="vote" class="wrap">
            <h2>投票列表</h2>
            <ul class="list">


                <li v-for="(vote,i) in votes" :class="i%2==0 ? 'odd' : '' ">
                    <h4>
                        <a :href="'view.html?id=' + vote.id">{{vote.vname}}</a>
                    </h4>
                    <div class="join"><a :href="'vote.html?id=' + vote.id">我要参与</a></div>
                    <p class="info">共有 {{vote.items.length}} 个选项，已有 {{vote.unum}} 个网友参与了投票。</p>
                </li>


            </ul>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="size"
                    @current-change="pageQuery">
            </el-pagination>
        </div>
    </vote>

</div>
<script>


    var v = new Vue({
        el : "#app",
        data : {
            votes:[],
            total:0,
            page:1,
            size:5
        },
        created() {
            /*axios.post("vote/vote/query").then( res => {
                this.votes = res.data;
            })*/
            let keywords = localStorage.getItem("keywords");
            localStorage.removeItem("keywords");
            this.query(keywords || "");
        },
        methods : {
            query(keywords) {
                /* /^\s*$/.test() 是在JavaScript中使用正则表达式来检测一个字符串是否只包含空格，或者是一个空字符串。
            ^ 表示字符串的开始
            $ 表示字符串的结束
            \s* 表示零个或多个空白字符（包括空格、制表符、换页符等）*/

                if (/^\s*$/.test(keywords) ){
                   keywords = "";
                }

                axios.get("vote/vote/query?vname=" + keywords + "&page=" + this.page + "&size=" + this.size).then(res =>{
                    this.votes = res.data.rows;
                    this.total = res.data.total;
                })

            },
            pageQuery(page){
                this.page = page;
                this.query("");
            }
        }
    })
</script>
</body>

</html>
